<script setup lang="ts">
    // import type { BannerItem } from '@/types/home'
    import { ref } from 'vue'
    
    const activeIndex = ref(0)
    
    // 当 swiper 下标发生变化时触发
    // const onChange: UniHelper.SwiperOnChange = (ev) => {
    //   activeIndex.value = ev.detail.current
    // }
    // 定义 props 接收
    const list=ref([{
						colorClass: 'uni-bg-red',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				])
   
    </script>
    
    <template>
      
      <view class="carousel">
        <swiper :circular="true" style="height: 320rpx;" :autoplay="true" :interval="3000" @change="onChange">
          <swiper-item  v-for="item in list">
            <navigator url="/pages/index/index" hover-class="none" class="navigator">
              <image mode="aspectFill" class="image" :src="item.url"></image>
            </navigator>
          </swiper-item>
        </swiper>
        <!-- 指示点 -->
        <view class="indicator">
          <text
            v-for="(item, index) in list"
            :key="index"
            class="dot"
            :class="{ active: index === activeIndex }"
          ></text>
        </view>
      </view>
    </template>
    
    <style lang="scss">
    /* 轮播图 */
    .carousel {
      height: 320rpx;
      position: relative;
      overflow: hidden;
      transform: translateY(0);
      background-color: #efefef;
      .indicator {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 16rpx;
        display: flex;
        justify-content: center;
        .dot {
          width: 30rpx;
          height: 6rpx;
          margin: 0 8rpx;
          border-radius: 6rpx;
          background-color: rgba(255, 255, 255, 0.4);
        }
        .active {
          background-color: #fff;
        }
      }
      .navigator,
      .image {
        width: 100%;
        height: 100%;
      }
    }
    </style>
    